import { edit_platformuser_role, platformuser_info } from '@/services/platformuser';
import { role_select } from '@/services/role';
import { ActionType } from '@ant-design/pro-components';
import { Divider, message, Modal, Spin, Transfer } from 'antd';
import { TransferDirection } from 'antd/es/transfer';
import { useEffect, useState } from 'react';
interface Iprops {
  isShowSetRoleModal: (show: boolean) => void;
  isRoleModalOpen: boolean;
  id: number | undefined;
  actionRef: React.MutableRefObject<ActionType | undefined>;
}
const SetRole = (props: Iprops) => {
  const { isRoleModalOpen, isShowSetRoleModal, actionRef, id } = props;
  // 穿梭框
  const [targetKeys, setTargetKeys] = useState<string[]>();
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  // 存储角色列表
  const [rolelist, setrolelist] = useState();

  // 页面初始化获取角色列表与用户详情
  useEffect(() => {
    get_roles();
    const getData = async () => {
      if (id) {
        let request_body = {
          id,
        };
        let params: any = await platformuser_info(request_body);
        console.log('params', params);
        if (params.msg == 'ok') {
          //处理角色
          let role_ids = params.data.role_ids?.split(',');
          if (role_ids) {
            let role_array = JSON.parse(role_ids).map((item: string | number) => {
              return +item;
            });
            setTargetKeys(role_array);
          } else {
            setTargetKeys([]);
          }
        }
      }
    };
    getData();
  }, []);

  // 获取角色列表
  const get_roles = async () => {
    let params = await role_select();
    console.log('角色列表', params);

    params.data.map((item: { key: number; id: number }) => {
      item.key = item.id;
    });
    setrolelist(params.data);
  };

  // 穿梭框相关方法
  const TransferonChange = (
    nextTargetKeys: string[],
    direction: TransferDirection,
    moveKeys: string[],
  ) => {
    console.log('targetKeys:', nextTargetKeys);
    setTargetKeys(nextTargetKeys);
  };
  const TransferonSelectChange = (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  // 设置角色
  const set_role = async () => {
    let role_ids = targetKeys?.map((item) => item + '');
    let request_body = {
      id,
      role_ids: JSON.stringify(role_ids),
    };

    //提交
    let res: any = await edit_platformuser_role(request_body);
    // console.log('设置角色', res);
    if (res.msg == 'ok') {
      message.success('角色设置成功');
      //关闭弹窗
      isShowSetRoleModal(false);
      setTargetKeys(undefined);
    } else {
      message.error(res.msg);
    }
  };
  return (
    <Modal
      title="设置角色"
      open={isRoleModalOpen}
      onOk={set_role}
      onCancel={() => isShowSetRoleModal(false)}
      width={800}
    >
      <Divider />
      {targetKeys === undefined ? (
        <div
          style={{
            margin: '20px 0',
            marginBottom: '20px',
            padding: '30px 50px',
            textAlign: 'center',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <Transfer
          dataSource={rolelist}
          titles={['角色列表', '已有角色']}
          targetKeys={targetKeys}
          selectedKeys={selectedKeys}
          onChange={TransferonChange}
          onSelectChange={TransferonSelectChange}
          render={(item) => item.rolename}
          listStyle={{
            width: 520,
            height: 300,
          }}
        />
      )}
    </Modal>
  );
};
export default SetRole;
